<template>
  <div>
    <div class="video-hd">
      <!-- <div>{{ form.ResName }}</div> -->
    </div>
    <div class="read-pdf">
      <eagle-row class="mt-10">
        <eagle-col span="8" type="flex" justify="center">
          <div style="text-align: right">
            <eagle-button size="small" type="default" @click="prePage"
              >上一页</eagle-button
            >
          </div>
        </eagle-col>
        <eagle-col span="8" type="flex" justify="center">
          <div class="mb-10 mt-10" style="text-align: center">
            {{ pageNum }}/{{ pageTotalNum }}
          </div>
        </eagle-col>
        <eagle-col span="8" type="flex" justify="center">
          <div style="text-align: left">
            <eagle-button size="small" type="default" @click="nextPage"
              >下一页</eagle-button
            >
          </div>
        </eagle-col>
      </eagle-row>

      <!-- <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->

      <pdf
        :page="pageNum"
        :src="baseUrl+url"
        ref="pdf"
        @loaded="loadFinish()"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum = $event"
      ></pdf>
      <!-- <pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></pdf> -->
    </div>
  </div>
</template>

<script>
import { CountDown } from "vant";
import pdf from "vue-pdf";

export default {
  components: { CountDown, pdf },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      id: "",
      form: {},
      url:this.$route.query.fileFath,
      mp4: false,
      pdf: false,
      ppt: false,
      time: 0,
      title: "",
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0,
      numPages: null, // pdf 总页数
    };
  },
  created() {
    this.id = this.$route.query.id;
  },

  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
        loadFinish() {
      console.log("加载完毕！");
    },

    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },


  },
};
</script>

<style lang="less" scoped>
.video-hd {
  z-index: 99;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
.video-hd > div {
  display: flex;
  align-items: center;
}
.video {
  width: 100%;
  height: auto;
}

// .fixed {
// 	position: fixed;
// 	top: 0;
// 	left: 0;
// 	bottom: 0;
// 	right: 0;
// 	background: #000;
// }

// .transform-rotate {
// 	position: fixed;
// 	top: 0;
// 	bottom: 0;
// 	transform-origin: 0 50%;
// 	transform: rotate(90deg) translate(-50%, -4%);
// }
</style>